<template>
    <div class="rescources_files" v-if="defaultFileList!==undefined && defaultFileList.length != 0">
        <div class="demo-upload-list" v-for="(file_item,index) in defaultFileList" :key="index">   
            <template v-if="file_item.status === 'finished' || file_item.status == undefined">
                <orh-file-icon :fileType="file_item.fileType" :fileSize="file_item.size" :fileUrl="file_item.file_url"></orh-file-icon>
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(file_item)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                </div>
            </template>
            <template v-else>
                <Progress v-if="file_item.showProgress" :percent="file_item.percentage" hide-info></Progress>
            </template>
        </div>
        <Modal v-if="PrevewData" :title="PrevewTitle" v-model="visible">
            <template v-if="PrevewData.fileType === 'image'">
                <div class="item">
                    <img class="preview_img" :src="PrevewData.file_url">
                    <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                        <span>下载</span>
                    </Button>
                </div>
            </template>

            <template v-else-if="PrevewData.fileType === 'video'">
                <div class="item">
                    <div class="player">
                        <video-player class="vjs-custom-skin" ref="videoPlayer" :options="videoPlayerSetting.playerOptions" :playsinline="videoPlayerSetting.playsinline" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)"
                            @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
                        </video-player>
                    </div>
                    <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                        <span>下载</span>
                    </Button>
                </div>
            </template>

            <template v-else-if="PrevewData.fileType === 'audio'">
                <div class="item">
                    <div class="player">
                        <audio controls controlsList="nodownload">
                            <source :src="PrevewData.file_url" type="audio/mpeg">
                            <source :src="PrevewData.file_url" type="audio/ogg">
                            <source :src="PrevewData.file_url" type="audio/wav">
                        </audio>
                    </div>
                    <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                        <span>下载</span>
                    </Button>
                </div>
            </template>

            <template v-else-if="PrevewData.fileType === 'ppt'">
                <i class="preview_icon orhon-smart-icon orhon-smart-icon-ppt"></i>
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-ppt"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'excel'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-excel"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'word'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-word"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'xml'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-xml"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'pdf'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-pdf"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'zip'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-zip"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else-if="PrevewData.fileType === 'other'">
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-other"></i>
                    <span>下载</span>
                </Button>
            </template>

            <template v-else>
                <Button type="primary" icon="android-download" @click="download(PrevewData.file_url)">
                    <i class="preview_icon orhon-smart-icon orhon-smart-icon-other"></i>
                    <span>下载</span>
                </Button>
            </template>
        </Modal>
    </div>
</template>

<script>
    import 'video.js/dist/video-js.css'
    import {
        videoPlayer
    } from 'vue-video-player'
    export default {
        props: {
            defaultFileList: Array,
            videoPlayer: Object
        },
        components: {
            videoPlayer
        },
        data() {
            return {
                defaultFileListOrdData: [],
                PrevewData: {},
                PrevewTitle: "预览",
                visible: false,
                videoPlayerSetting: {
                    "playerOptions": {
                        height: '360',
                        autoplay: false,
                        muted: false,
                        language: 'zh_CN',
                        playbackRates: [0.7, 1.0, 1.5, 2.0],
                        sources: [{
                            type: "video/mp4",
                            // mp4
                            src: null,
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        }],
                        poster: null,
                    },
                    playsinline: true
                }
            }
        },
        created() {
            console.log(this.defaultFileList)
        },
        mounted() {
            if (this.videoPlayer) {
                this.videoPlayerSetting = this.videoPlayer;
            }
            if (this.videoPlayer) {
                if (this.videoPlayer.playerOptions) {
                    this.videoPlayerSetting.playerOptions = this.videoPlayer.playerOptions;
                }
            }
            if (this.PrevewData.fileType == "video") {
                this.videoPlayerSetting.playerOptions.sources[0].type = this.PrevewData.type;
                this.videoPlayerSetting.playerOptions.sources[0].src = this.PrevewData.url;
                this.videoPlayerSetting.playerOptions.poster = null;
            }
        },
        watch: {
            defaultFileListOrdData(newVal, oldVal) {
                console.log(this.defaultFileList);
                console.log(this.defaultFileListOrdData);
                this.$emit('update:defaultFileList', newVal);
            }
        },
        methods: {
            handleView(res_item) {
                // debugger;
                this.PrevewTitle = "查看文件";
    
                this.PrevewData = res_item;
    
                if (this.PrevewData.fileType == "video") {
                    this.videoPlayerSetting.playerOptions.sources[0].type = this.PrevewData.type;
                    this.videoPlayerSetting.playerOptions.sources[0].src = this.PrevewData.url;
                    this.videoPlayerSetting.playerOptions.poster = null;
                }
    
                this.visible = true;
            },
            handleRemove(file_index) {
                debugger
                // this.defaultFileListOrdData = this.defaultFileList;
                let default_file_list = this.defaultFileList;
    
    
                default_file_list.splice(file_index, 1);
    
                this.defaultFileListOrdData = default_file_list;
                // this.form.items[item_index].rescources_file_ids.splice(file_index, 1);
                // this.form.items[item_index].default_file_list.splice(file_index, 1);
                console.log(this.defaultFileListOrdData);
                console.log(this.defaultFileList);
            },
    
            download(url) {
                this.$util.download(url);
            },
    
            // listen event
            onPlayerPlay(player) {
                // console.log('player play!', player)
            },
            onPlayerPause(player) {
                // console.log('player pause!', player)
            },
            onPlayerEnded(player) {
                // console.log('player ended!', player)
            },
            onPlayerLoadeddata(player) {
                // console.log('player Loadeddata!', player)
            },
            onPlayerWaiting(player) {
                // console.log('player Waiting!', player)
            },
            onPlayerPlaying(player) {
                // console.log('player Playing!', player)
            },
            onPlayerTimeupdate(player) {
                // console.log('player Timeupdate!', player.currentTime())
            },
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            // or listen state event
            playerStateChanged(playerCurrentState) {
                // console.log('player current update state', playerCurrentState)
            },
            // player is ready
            playerReadied(player) {
                // seek to 10s
                console.log('example player 1 readied', player)
                player.currentTime(10)
                // console.log('example 01: the player is readied', player)
            },
        }
    }
</script>
<style> 
@import '~/static/style/iconfont/iconfont.css';
</style>
<style lang="less" scoped>
    .demo-upload-list {
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .demo-upload-list .preview_icon {
        display: inline-block;
        height: 100%;
        width: 100%;
        font-size: 79px;
    }

    img.preview_img {
        width: auto;
        max-width: 100%;
    }
    .player{
        width:100%;
    }
    div#vjs_video_1 {
        width: 100%;
    }
</style>
